<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<div id="headerUserStatusPie" style="width: 50%; height: 400px; float: left;"></div>
<div id="subUserStatusPie" style="width: 50%; height: 400px; float: left;"></div>
<script type="text/javascript">
	using('echarts', function() {
		var $tab = $navTab.focus(), $headerUserStatusPie = $('#headerUserStatusPie', $tab);
		var	headerChart = echarts.init($headerUserStatusPie[0]);
		// 指定图表的配置项和数据
		hOption = {
			    title : {
			        text: '总部用户状态统计图',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: <ww:property value="headerLegend" />
			    },
			    series : [
			        {
			            name: '总部用户状态统计',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data: <ww:property value="headerChartData" />,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};

		// 使用刚指定的配置项和数据显示图表。
		headerChart.setOption(hOption);

		$headerUserStatusPie.resize(function() {
			headerChart.resize(hOption);
		});

		var $subUserStatusPie = $('#subUserStatusPie', $tab);
		var	subChart = echarts.init($subUserStatusPie[0]);
		// 指定图表的配置项和数据
		sOption = {
			    title : {
			        text: '下属企业用户状态统计图',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: <ww:property value="subLegend" />
			    },
			    series : [
			        {
			            name: '下属企业用户状态统计',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data: <ww:property value="subChartData" />,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};

		// 使用刚指定的配置项和数据显示图表。
		subChart.setOption(sOption);

		$subUserStatusPie.resize(function() {
			subChart.resize(sOption);
		});
	})
</script>
